<template>
    <div class="login-container" v-cloak>
        <div class="login-header">
            <h1>Busi账管</h1>
        </div>
        <!-- 
            配置Form表单验证：
                1.必须给 el-form 组件绑定 model 为表单数据对象
                2.给需要验证的表单项 el-form-item 绑对应的 prop 属性，注意这里写的是字符串
                3.通过 el-form 组件的rules属性配置验证规则
                4.手动触发表单验证
                    - 给 el-form 设置 ref 属性
                    - 通过 ref 获取 el-form 组件，调用组件的 validate 方法进行验证
        -->
      <div class="login-div">
        <el-form class="login-form" ref="login-form" :model="user">
          <el-form-item prop="username">
            <el-input v-model="user.username" placeholder="请输入账户"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="user.password" placeholder="请输入密码" type="password"></el-input>
          </el-form-item>
          <el-form-item prop="agree">
            <el-checkbox v-model="user.agree">我已阅读并同意用户协议和隐私条款</el-checkbox>
          </el-form-item>
          <el-form-item>
            <el-button class="login-btn" :loading="loading" type="primary" @click="onSubmit" v-loading.fullscreen.lock="fullscreenLoading">登 录</el-button>
          </el-form-item>
        </el-form>
      </div>

    </div>
</template>

<script>
import busiApi from "../../api";
export default {
    name: 'LoginIndex',
    components: {
        
    },
    props: {},
    data () {
        return {
          fullscreenLoading: false,
            user: {
                username: 'Busi',
                password: '',
                acctIdOrMsisdn: '123',
                loginType: '1',       // 登录类型  1个人账户  2管理员
                agree: true     // 自动勾选
            },
            loading: false      //登录按钮的loading状态
        }
    },
    computed: {},
    watch: {},
    created () {
        // 记住我
        this.rememberMe()
    },
    mounted () {},
    methods: {
        rememberMe() {
            // 获取缓存的用户名和密码
            this.user.username = this.$session.get('username') ? this.$session.get('username') : 'Busi'
            this.user.password = this.$session.get('password') ? this.$session.get('password') : '123'
        },
        login() {
          this.$session.set('token', token)
          this.$router.push('/sys')
          //开启loading动画，防止用户频繁点击
          /*this.loading = true
          this.fullscreenLoading = true
          setTimeout(() => {
            this.fullscreenLoading = false;
            // 模拟登录
            busiApi.staffLogin({
              staffName: this.user.username,
              password: this.user.password
            }).then(res => {
              console.log(res.data)
              const {staffCode, staffName, token} = res.data
              // 登录成功
              this.$session.set('staffCode', staffCode)
              this.$session.set('staffName', staffName)
              this.$session.set('password', this.user.password)
              this.$session.set('token', token)
              this.$router.push('/sys')
              this.fullscreenLoading = false
              this.loading = false
            }).catch(err => {

            })
          }, 1000)*/
        },
        onSubmit () {
            if(!this.user.agree) {
                this.$message.error('请勾选用户协议')
                return
            }
            this.login()
        }
    },
}
</script>

<style lang="less" scoped>
    [v-clock] {
        display: none;
    }
    .login-container {
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background: url('./login.jpg') no-repeat;
        background-size: cover;
        .login-header {
            height: 57px;
            width: 400px;
            font-weight: 400;
            text-align: center;
            line-height: 67px;
            color: #fff;
            margin-bottom: 50px;
            h1 {
                padding: 0;
                margin: 0;
            }
        }
        .login-div {
          .login-form {
            background-color: #fff;
            padding: 40px;
            min-width: 200px;
            border-radius: 5px;
            .login-btn {
              width: 100%;
            }
          }
        }

    }
</style>